<template>
	<view class="opts-time">
		<picker mode="date" @change="changeTimeStart">
			<view class="time-range" :class="{'ft-gray':!timerange[0]}">{{timerange[0]||'选择开始时间'}}</view>
		</picker>
		—
		<picker mode="date" @change="changeTimeEnd">
			<view class="time-range" :class="{'ft-gray':!timerange[1]}">{{timerange[1]||'选择结束时间'}}</view>
		</picker>

		<view class="time-reset" @click="resetTime">重置</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timerange: []
			}
		},
		methods: {
			changeTimeStart(e) {
				this.timerange[0] = e.detail.value;
				this.updateValue();
				this.$forceUpdate();
			},
			changeTimeEnd(e) {
				this.timerange[1] = e.detail.value;
				this.updateValue();
				this.$forceUpdate()
			},
			resetTime() {
				this.timerange = []
				this.updateValue();
			},
			updateValue() {
				this.$emit('change', {
					value:this.timerange
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	%value-box {
		padding: 20rpx;
		height: 80rpx;
		background: #EEEEEE;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	view {
		box-sizing: border-box;
	}

	.ft {
		font-size: 28rpx;
		color: #222222;
		line-height: 33rpx;
	}

	.ft-gray {
		@extend .ft;
		color: #999999 !important;
	}

	.icon32 {
		width: 32rpx;
		height: 32rpx;
	}

	.opts-time {
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #777777;

		.time-reset {
			font-size: 26rpx;
			color: #777777;
			line-height: 30rpx;
		}

		.time-range {
			@extend %value-box;
			@extend .ft;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 276rpx;
		}
	}
</style>